<template>
	<view class="chapterDetails">
		<!-- #ifdef APP-PLUS || H5 -->
		<image :src="animationUrl" class="animationBg" v-if="isClick"></image>
		<view :id="'canvasId'" :treeDom="treeDom" :lineData="lineData" :change:treeDom="treeGraph.changeTreeGraphSize"
			:change:lineData="treeGraph.changeTreeGraphData" style="width: 100%;height: 100%;over"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
		<view class="goBack" @click="goBack">返回</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			chapterList: [],
			treeDom: {
				width: 375,
				height: 300,
			},
			lineData: {
				nodes: [],
				edges: []
			}
		}
	},
	mounted() {
		uni
			.createSelectorQuery()
			.select("#canvasId")
			.boundingClientRect((data) => {
				this.treeDom = data;
			})
			.exec();
	},
	onLoad(option) {
		this.getStoreInfo(option.id)
		this.getStoreLine()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		//用章节ID获取故事情节
		getStoreInfo(id) {
			uni.request({
				url: this.configs.gameUrl + '/play/mStoryInfo/queryList',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					chapterId: id,
					pageSize: 200,
					userId: this.configs.userId
				},
				success: data => {
					this.lineData.nodes = data.data.result
				},
				fail: (data, code) => { }
			});
		},
		getStoreLine() {
			uni.request({
				url: this.configs.gameUrl + '/play/mStoryLine/list',
				method: 'GET',
				header: {
					'X-Access-Token': this.configs.userToken // 在header中添加token
				},
				data: {
					pageSize: 200,
					userId: this.configs.userId
				},
				success: data => {
					this.lineData.edges = data.data.result.records
				},
				fail: (data, code) => { }
			});
		},
	},
}
</script>

<script module="treeGraph" lang="renderjs">
	import treeData1 from "./data2";
	import F6 from '@/static/js/F6/f6.min.js'
	import TreeGraph from '@/static/js/F6/extends/graph/treeGraph.js'

	import dagreLayout from '@/static/js/F6/extends/layout/dagreLayout.js';
	// F6.registerGraph('TreeGraph', TreeGraph)
	F6.registerLayout('dagre', dagreLayout);

	F6.registerNode(
		'sql', {
			drawShape(cfg, group) {
				const rect = group.addShape('rect', {
					attrs: {
						x: -75,
						y: -25,
						width: 150,
						height: 100,
						radius: 10,
					},
					name: 'rect-shape',
				});
				// if (cfg.id) {
				// 	group.addShape('text', {
				// 		attrs: {
				// 			text: cfg.id,
				// 			x: 0,
				// 			y: 0,
				// 			fill: '#00287E',
				// 			fontSize: 14,
				// 			textAlign: 'center',
				// 			textBaseline: 'middle',
				// 			fontWeight: 'bold',
				// 		},
				// 		name: 'text-shape',
				// 	});
				// }
				group.addShape('image', {
					attrs: {
						x: -75, // 图片的 x 坐标
						y: -25, // 图片的 y 坐标
						width: 150, // 图片的宽度
						height: 100, // 图片的高度
						img: cfg.url, // 图片的路径
					},
				});
				return rect;
			},
		},
		'single-node',
	);

	export default {
		data() {
			return {
				graph: null,
				isClick: false,
				animationUrl: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			SearchResourceIdBById(id){
				this.lineData.nodes.filter((item)=>{
					if(item.id == id){
						console.log(item,3333)
						this.isClick = true
						this.animationUrl = item.url
						setTimeout(() => {
							this.isClick = false
							uni.navigateTo({
								url: '/pages/client/games/videoDetails?id=' + item.resourceId + '&chapterId=' + item.chapterId
							});
						}, 2000)
						// uni.navigateTo({
						// 	url: '/pages/client/games/videoDetails?id=' + item.resourceId
						// });
					}
				})
			},
			init() {
				console.log('init')
				this.graph = new F6.Graph({
					container: 'canvasId',
					width: window.innerWidth,
					height: window.innerHeight - 44,
					animate: true,
					//由左至右布局
					fitView: true, // 画布自适应
					fitCenter: true, //图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView。
					linkCenter: true, //指定边是否连入节点的中心

					layout: {
						type: 'dagre',
						rankdir: 'LR',
						nodesepFunc: (d) => {
							return 50;
						},
						ranksep: 70,
						controlPoints: true,
					},
					defaultNode: {
						type: 'sql',
					},
					defaultEdge: {
						type: 'polyline',
						style: {
							lineWidth: 4,
							stroke: '#C2C8D5',
							radius: 100
						},
					},
					nodeStateStyles: {
						selected: {
							stroke: '#d9d9d9',
							fill: '#5394ef',
						},
					},
					modes: {
						default: [
							'drag-canvas',
							'zoom-canvas',
							'click-select',
							{
								type: 'tooltip',
								formatText(model) {
									const cfg = model.conf;
									const text = [];
									cfg.forEach((row) => {
										text.push(`${row.label}:${row.value}<br>`);
									});
									return text.join('\n');
								},
								offset: 30,
							},
						],
					},

				})
				this.graph.data(this.lineData);
				this.graph.render();
				this.graph.on('tap', (evt) => {
					this.SearchResourceIdBById(evt.item._cfg.id)
					// uni.navigateTo({
					// 	url: '/pages/client/games/videoDetails?id=' + evt.item._cfg.id
					// });
				});
			},
			changeTreeGraphSize() {},
			changeTreeGraphData() {
				if (this.lineData.edges.length > 0 && this.lineData.nodes.length > 0) {
					
					this.graph.read(this.lineData)
				// this.graph.changeSize(2000, 350);
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
.btn_flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 20rpx;

	.btn {
		padding: 10rpx 20rpx;
		background-color: #293ed4;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #fff;
		margin-left: 10rpx;
		margin-bottom: 10rpx;
	}
}

uni-page-body {
	background: none;
}

.chapterDetails {
	height: 100vh;
	background: url('https://cdn.yinhehh.cn/static/img/game/chapter_bg.jpg') no-repeat;
	background-size: 100%;

	.hide {
		display: none;
	}

	.animationBg {
		position: absolute;
		width: 170rpx;
		height: 100rpx;
		left: 50%;
		top: 50%;
		margin-left: -85rpx;
		margin-top: -50rpx;
		z-index: 10;
		//放大、同时变淡动画，只执行一次
		animation: scale 3s linear 0s 1 forwards;
	}

	@keyframes scale {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(4);
			opacity: 0;
		}
	}

	.goBack {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		width: 100rpx;
		height: 24rpx;
		//粉色背景
		background: #F8879C;
		border-radius: 12rpx;
		text-align: center;
		line-height: 24rpx;
		color: #fff;
		font-size: 14rpx;
	}
}
</style>